<template>
  <a-card size="small" :bordered="false" title="系统配置">
    <a-spin :spinning="loading">
      <a-form :model="formData" :label-col="{ span: 4 }" :wrapper-col="{ span: 10 }">
        <a-divider orientation="left">Android配置</a-divider>
        <a-form-item label="当前版本" required>
          <a-input v-model:value="formData.androidVersion" placeholder="请输入当前版本" />
        </a-form-item>
        <a-form-item label="更新链接" required>
          <a-input v-model:value="formData.androidUrl" placeholder="请输入更新链接" />
        </a-form-item>
        <a-form-item label="更新说明" required>
          <a-textarea
            v-model:value="formData.androidVersionExplain"
            placeholder="请输入更新说明"
            :auto-size="{ minRows: 2, maxRows: 5 }"
          />
        </a-form-item>
        <a-divider orientation="left">IOS配置</a-divider>
        <a-form-item label="当前版本" required>
          <a-input v-model:value="formData.iosVersion" placeholder="请输入当前版本" />
        </a-form-item>
        <a-form-item label="更新链接" required>
          <a-input v-model:value="formData.iosUrl" placeholder="请输入更新链接" />
        </a-form-item>
        <a-form-item label="更新说明" required>
          <a-textarea
            v-model:value="formData.iosVersionExplain"
            placeholder="请输入更新说明"
            :auto-size="{ minRows: 2, maxRows: 5 }"
          />
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
          <a-button type="primary" @click="handleSubmit">提交</a-button>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-card>
</template>

<script name="SystemConfigSystem" lang="ts" setup>
import { getConfig, updateConfig } from "@/api/system/config";

const configKey = "app";
const loading = ref(false);
const formData = reactive({
  androidVersion: "",
  androidVersionExplain: "",
  androidUrl: "",
  iosVersion: "",
  iosVersionExplain: "",
  iosUrl: ""
});

const handleLoadData = () => {
  loading.value = true;
  getConfig(configKey)
    .then(response => {
      Object.assign(formData, response.data);
    })
    .finally(() => {
      loading.value = false;
    });
};

const handleSubmit = () => {
  loading.value = true;
  updateConfig({
    configKey,
    configValues: formData
  })
    .then(() => {
      antdMessage.success("保存成功");
      handleLoadData();
    })
    .finally(() => {
      loading.value = false;
    });
};

onMounted(() => {
  handleLoadData();
});
</script>
